<template >
    <div class="sdy-search">
        <SdyHeader title="啥都有" back>
        <template #title>
            <van-search v-model="searchText" shape="round"  background="#c72418"  placeholder="请输入搜索关键词" />
        </template>
        <template #right>
           <van-button @click="searchHandler" size="small" type="success">搜索</van-button>
        </template>
    </SdyHeader>
    <!-- 如果没有文本的时候出现历史内容 -->
    <!-- <SdySearchHistory v-if="!searchText"></SdySearchHistoryVue> -->
    <!-- 如果有文本的时候出现搜索内容 -->
    <!-- <SdySearchList v-else></SdySearchListVue> -->
    <!-- 当searchText为true的时候渲染SdySearchList组件 -->
    <!-- 当searchText为false的时候渲染SdySearchHistory组件 -->
    <!-- 这里用到的是动态组件
    vue里面会提供一个component组件该组件通过is属性来决定这个位置的渲染什么内容
     -->
    <component :is="searchText?SdySearchList:SdySearchHistory"></component>
   </div>
</template>

<script setup lang="ts">
import SdySearchHistory from './components/SdySearchHistory.vue';
import SdySearchList from './components/SdySearchList.vue';
import {ref, watch,provide} from 'vue'
import {useRouter, type Router} from 'vue-router'
import {searchListApi} from '@/api/goods'
import type { MyHotItem } from '@/config/interface';
const $router:Router=useRouter()
// 准备一个数据和文本框交互
const searchText =ref<string>('')
// 搜索按钮的事件
const searchHandler =()=>{
    const text =searchText.value.trim()
    if(!text) return
    // 路由跳转
    $router.push({path:'/list',query:{search:text}})
}
// 准备一个数据表示搜索列表
const searchList =ref<MyHotItem[]>([])
// 利用watch监控searchText
watch(searchText,async()=>{
    if(!searchText.value.trim())return 
    const res = await searchListApi(searchText.value.trim())
    // console.log(res)
    searchList.value=res.data
})
provide('searchList',searchList)
</script>

<style scoped lang="scss">

</style>